import React , {Component} from 'react'
import { connect } from 'react-redux'
import style from './index.module.scss'

class Index extends Component {
    handleList(allList) {
        let list = []
        while(list.length < 3) {
            // 处理数据
            let index = Math.floor(Math.random() * allList.length)
            if(!list.some(item => item.name === allList[index].name)) {
                list.push(allList[index])
            }
        }
        // 找到一个随机数=》通过下标取出该对象=》判断是否在list里面存在 =》如果存在重复该过程
        //                                                         =》如果不存在，push到list里面
        return list
    }
    shouldComponentUpdate() {
        return false
    }
    render(){
        return(
            <div>
                <div>
                    <span>{this.props.title}</span>
                    <button onClick={() => {this.forceUpdate()}}>换一批</button>
                </div>
                {
                    this.handleList(this.props.list).map((item, key) => <div key={key} className={style.changeItem}>
                        <div>{item.name}</div>
                        <div className={style.han}>
                            <div className={style.left}>{item.price}</div>
                            <div className={style.right}>
                                <button onClick={() => this.props.add(item.name)}>+</button>
                            </div>
                        </div>
                    </div>)
                }
            </div>
        )
    }
}
const a = (state) => {
    return {
        list: state.rList
    }
}
const b = (dispatch) => {
    return {
        add(name) {
            console.log(1, name)
            dispatch({
                type: 'ADD',
                name: name
            })
        },
    }
}
export default connect(a, b)(Index)